<template>
	<view class="user-order-sign f-desc" v-if="isLoad">
		<view class="order-sign-info flex-between fix"
			:style="{width:`${winHeight}px`,top:`${(winHeight-4)/2}px`,right:`10px`}">
			<view class="c-caption">该签名仅供完成服务使用</view>
			<view class="flex-y-center">
				<view @tap.stop="signCtx.clear()" class="flex-y-center"><i class="iconfont icon-del"></i>清空签名</view>
				<view @tap.stop="confirmSign" class="sign-btn flex-center c-base radius-10 ml-lg"
					:style="{background:primaryColor}">
					确定完成</view>
			</view>
		</view>
		<view class="flex-center" style="height:100vh">
			<v-sign :width="`${winWidth}px`" :height="`${winHeight}px`" bgColor="#fff"
				:customStyle="{border:'1rpx dashed #333'}" @init="onSignInit">
			</v-sign>
		</view>
		<view class="order-sign-info fix" :style="{width:`${winHeight}px`,top:`${(winHeight-4)/2}px`,left:`10px`}">
			<view class="sign-nav flex-center rel">
				手写签名
				<view @tap.stop="$util.goUrl({url:1,openType:`navigateBack`})" class="sign-back flex-y-center abs"><i
						class="iconfont icon-left"></i>取消</view>
			</view>
		</view>
		<canvas style="position: absolute;top:999px;overflow:hidden" :style="{ width: cavWidth, height: cavHeight }"
			canvas-id="handWriting"></canvas>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isLoad: false,
				winWidth: 0,
				winHeight: 0,
				cavWidth: 0,
				cavHeight: 0
			};
		},
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
		}),
		methods: {
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif 
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync()
				this.winWidth = windowWidth - 100
				this.winHeight = windowHeight - 40
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.isLoad = true
			},
			onSignInit(signCtx) {
				this.signCtx = signCtx;
			},
			save(res) {},
			async confirmSign(item) {
				let line = this.signCtx.getLineData()
				if (line == 0) {
					this.$util.showToast({
						title: `请先进行签名`
					})
					return

				}
				const filePath = await this.signCtx.canvasToTempFilePath()
				this.newCanvas(filePath)
			},
			newCanvas(path) {
				let that = this
				let ctx = uni.createCanvasContext("handWriting", this); //创建绘图对象
				// let ctxMark = uni.createCanvasContext("handMark", this); //创建绘图对象
				wx.getImageInfo({
					src: path,
					success: (res) => {
						let {
							width: ctxHeight,
							height: ctxWidth
						} = res
						this.cavWidth = `${ctxWidth}px`
						this.cavHeight = `${ctxHeight}px`
						ctx.clearRect(0, 0, ctxWidth, ctxHeight);
						ctx.setFillStyle('#fff')
						ctx.fillRect(0, 0, ctxWidth, ctxHeight)
						ctx.draw()
						ctx.beginPath();
						ctx.translate(0, ctxHeight);
						ctx.rotate(-90 * Math.PI / 180)
						ctx.drawImage(path, 0, 0, ctxHeight, ctxWidth)
						// 为图片添加水印
						ctx.translate(ctxWidth / 2, ctxHeight / 2);
						ctx.rotate(45 * Math.PI / 180);

						//这部分是水印的大小位置和数量
						let fillTextCont = '-仅供完成服务使用-'
						let horizontal = ctxWidth / 3;
						let vertical = ctxHeight / 5;
						for (let i = 0; i <= 15; i++) {
							for (let j = 0; j <= 30; j++) {
								ctx.beginPath();
								ctx.setFontSize(14);
								ctx.setFillStyle("rgba(0,0,0,0.15)");
								ctx.fillText(fillTextCont, i * horizontal - ctxWidth / 2, j * vertical -
									ctxHeight / 2, 200)
							}
						}

						ctx.draw(true, () => {
							setTimeout(() => {
								uni.canvasToTempFilePath({
									canvasId: "handWriting",
									async success(res) {
										that.toSaveImg(res.tempFilePath)
									}
								}, this)
							}, 500)
						}, this)
					}
				})
			},
			async toSaveImg(filePath) {
				this.$util.showLoading()
				let {
					attachment_path: sign_img
				} = await this.$api.base.uploadFile({
					filePath,
					formData: {
						type: 'picture'
					}
				})
				let {
					id
				} = this.options
				await this.$api.order.userSignOrder({
					id,
					sign_img
				})
				this.$util.hideAll()
				this.$util.showToast({
					title: `签名成功`
				})
				setTimeout(() => {
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				}, 1000)
			}
		},
	};
</script>

<style lang="scss" scoped>
	.user-order-sign {
		width: 100vw;
		height: 100vh;

		.order-sign-info {
			transform: rotate(90deg);
			height: 100rpx;

			.sign-nav {
				height: 100rpx;

				.sign-back {
					height: 100rpx;
					top: 0;
					left: 0;
				}
			}

			.sign-btn {
				width: 160rpx;
				height: 70rpx;
			}
		}

	}
</style>